<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>申请乐游推广员</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        .top-img{
            width: 100%;
            height: 10rem;
            background: url(/imgs/pic_index.png) no-repeat;
            background-size: 100% auto;
        }
        .tag{
            border: 1px solid #D9D9D9;
            border-radius: 5px;
            background-color: #FFFFFF;
            width: 86%;
            margin: 0 auto;
            padding: 20px 15px;
            z-index: 5;
        }
        .li{
            display: flex;
            border-bottom: 1px solid #B3B3B3;
            box-sizing: border-box;
            padding: 10px;
            position: relative;
        }
        .li.active{
            border-bottom: 1px solid #D9543B;
        }
        .btn-yzm{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            right: 0;
            background-color: #D9543B;
            color: #FFFFFF;
            font-size: 0.7rem;
            padding: 8px;
            border-radius: 5px;
            width: 4rem;
            text-align: center;
        }
        .icon{
            height: 1rem;
            margin-right: 5px;
            padding-top: 2px;
        }
        .btn-big{
            text-align: center;
            background-color: #D9543B;
            border-radius: 5px;
            font-size: 1.1rem;
            padding: 0.7rem 0;
            color: #F9EAE7;
            width: 90%;
            margin: 40px auto 0;
        }
        .xieyi-wrap{
            margin-top: 30px;
            font-size: 0.8rem;
            color: #666666;
        }
        .xieyi-icon{
            width: 1rem;
            height: 1rem;
            border: 1px solid #666666;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }
        .xieyi-icon.active{
            border: 1px solid #D9543B;
        }
        .xieyi-icon-2{
            width: 50%;
            height: 50%;
            background-color: #D9543B;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            display: none;
            margin-right: 5px;
        }
        .xieyi-text{
            display: inline-block;
            vertical-align: middle;
        }
        .xieyi-wrap{
            
        }
        .xieyi-con{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10;
            display: none;
        }
        .xieyi-con-wrap{
            width: 90%;
            height: 60%;
            margin: 30% auto 0;
            overflow: auto;
        }
        .xieyi-con-wrap img {
            width: 100%;
        }
        input {
            border: none;
            outline: none;
        }
    </style>
    <body>
        <div id="all">
            <form class="btn-form" action="/mobile/apply" method="POST">
                {{csrf_field()}}
                <div class="xieyi-con" onclick="closeXY()">
                    <div class="xieyi-con-wrap">
                        <img src="{{asset('/image/xieyi.png')}}" onclick="myStop(event)" />
                    </div>
                </div>
                <div class="top-img"></div>
                <div class="tag">
                    <div class="li">
                        <img class="icon" src="{{asset('/imgs/ren_n.png')}}"/>
                        <input id="name" class="inp" type="text" placeholder="请输入姓名" value="{{old('realname')}}" name="realname"/>
                    </div>
                    <div class="li">
                        <img class="icon" src="{{asset('/imgs/address_n.png')}}"/>
                        <input id="area" class="inp" type="text" placeholder="请输入推广区域" value="{{old('address')}}" name="address"/>
                    </div>
                    <div class="li">
                        <img class="icon" src="{{asset('/imgs/phone_n.png')}}"/>
                        <input id="phone" class="inp" type="number" placeholder="请输入手机号" value="{{old('mobile')}}" name="mobile"/>
                    </div>
                    <div class="li">
                        <img class="icon" src="{{asset('/imgs/yzm_n.png')}}"/>
                        <input id="yzm" class="inp" type="text" placeholder="输入验证码" value="{{old('code')}}" name="code"/>
                        <div id="btnYzm" class="btn-yzm btn-code">获取验证码</div>
                    </div>
                    <div class="xieyi-wrap">
                        <div class="xieyi-icon" ontouchstart="chooseXY()"><div class="xieyi-icon-2"></div></div>
                        <div class="xieyi-text">同意<span onclick="lookXY()">“乐游推广注册与服务协议”</div>
                    </div>
                    <input type="hidden" name="open_id" value="{{$origin_info['openid']}}">
                    <input type="hidden" name="unionid" value="{{$origin_info['unionid']}}">
                    <input type="hidden" name="nickname" value="{{$origin_info['nickname']}}">
                    <input type="hidden" name="avatar" value="{{$origin_info['headimgurl']}}">

                    <div id="go" class="btn-big">提交申请</div>
                </div>
                <div style="text-align:center;font-weight:bold;font-size:13px">
                    <span id="err_msg" style="color:red;">
                        @if ($errors->any())          
                          {{ $errors->first() }}
                        @endif
                    </span>
                </div>  
            </form>    
        </div>
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript">
        var clock = '',
            nums =60,
            tn,
            xieyiStatus = false;
        // 样式
        var bigH = $(window).height()
        $('#all').height(bigH)
        var imgH = $('.top-img').height()
        console.log(imgH)
        $('.tag').css('margin-top', imgH * 0.4 * -1)
        var isSending = false
        var allTime = 60
        var timer = null
        $('.inp').focus(function() {
            $(this).parent().addClass('active')
            $(this).parent().siblings().removeClass('active')
            var img = $(this).siblings()
            var oldStr = img.attr('src')
            var newStr = oldStr.replace('_n.png', '_y.png')
            img.attr('src', newStr)
            // 其他img恢复
            var otherImgs = $(this).parent().siblings().find('.icon')
            otherImgs.each(function() {
                var imgNew = $(this).attr('src').replace('_y.png', '_n.png')
                $(this).attr('src', imgNew)
            })
        })

        function chooseXY() {
            if (xieyiStatus) {
                xieyiStatus = false
                $('.xieyi-icon').removeClass('active')
                $('.xieyi-icon-2').hide()
            } else {
                xieyiStatus = true
                $('.xieyi-icon').addClass('active')
                $('.xieyi-icon-2').show()
            }
        }

        function lookXY() {
            $('.xieyi-con').show()
        }

        function myStop(event) {
            event.stopPropagation();
        }

        // 关闭协议
        function closeXY() {
            console.log('关闭协议')
            $('.xieyi-con').hide()
        }

        $(".btn-code").click(function(){
            var mobile = $("input[name=mobile]").val();
            if (!mobile) {
                $('#err_msg').text("手机号不能为空");
                return false;
            }
            $.ajax({
                type: "get",
                dataType: "json",
                url: '/mobile/get_code',
                data: {
                    mobile: mobile
                },
                success: function (data) {
                    if (data.flag) {
                        sendCode();
                    } else {
                        $('#err_msg').text(data.message);
                    }
                }
            }); 
        });

        function sendCode()
        {
            btn = $('.btn-code');
            btn.unbind('click');
            $(btn).css({"background-color":"#ccc"});
            $(btn).text(nums+'秒重新获取')
            clock = setInterval(doLoop, 1000); //一秒执行一次
        }

        function doLoop(){
            nums--;
            if(nums > 0){
                $(btn).text(nums+'秒重新获取')
            }else{
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                $(btn).text('获取验证码');
                    //btn.value = '点击发送验证码';
                $(btn).css({"background-color":"#D9543B"});
                nums = 60; //重置时间
                $(".btn-code").click(function(){
                    sendCode();
                });
            }
        }

        $("#go").click(function(){
            // if ($('.agreement').is(':checked')) {
                var realname = $("input[name=realname]").val();
                var address = $("input[name=address]").val();
                var mobile = $("input[name=mobile]").val();
                var code = $("input[name=code]").val();
                var open_id = $("input[name=open_id]").val();
                var unionid = $("input[name=unionid]").val();
                var nickname = $("input[name=nickname]").val();
                var avatar = $("input[name=avatar]").val();
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: '/mobile/apply',
                    data: {
                        realname: realname,
                        address: address,
                        mobile: mobile,
                        code: code,
                        open_id: open_id,
                        unionid: unionid,
                        nickname: nickname,
                        avatar: avatar,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (data) {
                        if (data.flag) {
                            window.location.href = "/mobile/index";
                        } else {
                            $("#err_msg").text(data.msg);
                        }
                    }
                }); 
            // } else {
            //     $("#err_msg").text('请勾选推广注册与服务协议');
            // }
        });
    </script>
    </body>
</html>
